<template>
  <div class="nav">
    <ul>
      <li
        v-for="item in navList"
        :key="item.id"
        @click="bind(item.id)"
        :class="{ active: item.id == myIndex }"
      >
        {{ item.navName }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["navIndex"],
  data() {
    return {
      myIndex: this.navIndex,
      navList: [
        {
          id: 1,
          navName: "美丽乡村",
        },
        {
          id: 2,
          navName: "村民画像",
        },
        {
          id: 3,
          navName: "乡村土地",
        },
        {
          id: 4,
          navName: "乡村产业",
        },
        {
          id: 5,
          navName: "村民宜居",
        },
        {
          id: 6,
          navName: "村民自治",
        },
      ],
    };
  },
  methods: {
    bind(index) {
      this.myIndex = index;
      switch (index) {
        // 美丽乡村
        case 1:
          this.$router.push("/mlxc");
          break;

        // 村民画像
        case 2:
          this.$router.push("/cmhx");
          break;
      }
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
@import url(../../../style/reset.css);

.nav {
  position: relative;
  top: 100px;
  width: 100%;
  height: 100px;
}
.nav ul {
  display: flex;
  padding-top: 30px;
  justify-content: center;
  align-item: center;
}
.nav ul li {
  width: 154px;
  height: 61px;
  font-size: 24px;
  color: #fff;
  float: left;
  line-height: 61px;
  text-align: center;
  cursor: pointer;
  margin-right: 50px;
  background: url(../../../assets/mlxc/juxingbj.png) no-repeat;
}
.active {
  color: yellow !important;
}
</style>